<template>
    <div class="practice">
        <div class="neirong-top">

            <router-link to="/home">
                <span class="iconfont icon-arrow-left-bold"></span>
            </router-link>

            <span style="font-size: 14px;font-weight: 800;">
                {{ page + 1 }} / {{ practice.length }}</span>
            <!-- <span class="iconfont icon-gengduo"></span> -->
            <van-icon name="replay" size="20" style="padding: 0 18px;" @click="nullinput()" />
        </div>
        <div class="practicebox">
            <input type="text" v-model="answer" @keyup.enter="getanswer()">
            <transition mode="out-in" name="answer">
                <h1 style="color: #e4303a;" v-if="showanswer && !yesorno">{{ practice[page].name }}</h1>
                <h1 style="color: #008b7a;" v-if="showanswer && yesorno">{{ practice[page].name }}</h1>
            </transition>
            <!-- <h1 style="color: #e4303a;" v-if="showanswer&&!yesorno">{{ practice[page].name }}</h1>
            <h1 style="color: #008b7a;" v-if="showanswer&&yesorno">{{ practice[page].name }}</h1> -->
        </div>
        <!-- <h1>{{ practice[page].name }}</h1> -->

        <h5 v-if="idershow">
            {{ practice[page].phonetic }}
        </h5>
        <div class="ider" v-if="!idershow" @click="idershow = !idershow">
            <van-icon name="question-o" size="20" />
        </div>

        <div class="pbox">
            <p v-for="mean in practice[page].meaning" :key="mean">{{ mean }}</p>
            <!-- <p>vt. 故意伤害，激怒</p> -->
        </div>
        <div class="footmode">
            <span class="iconfont icon-shangyishou1" @click="lastpage()"></span>
            <!-- <span class="iconfont icon-banzou" @click="finishword(practice[page].id)"></span> -->
            <van-icon name="good-job-o" size="30" @click="ripefinish(practice[page].id)" />
            <span class="iconfont icon-xiayishou1" @click="nextpage()"></span>
        </div>
    </div>
</template>

<script>
export default {
    props: ['cet4list'],
    data() {
        return {
            practice: [],
            page: 0,
            eye: true,
            answer: '',
            yesorno: false,
            showanswer: false,
            idershow: false
        };
    },
    methods: {
        copylist() {
            this.practice = [];
            this.cet4list.forEach((item) => {
                if (!item.ripe && item.stadydone == true == true) {
                    this.practice.push(item)
                }
            });
            console.log(this.practice, "对");
            return this.practice
        },
        nextpage() {//下一页
            this.page += 1
            if (this.page >= this.practice.length) {
                this.page = 0
            }
            this.answer = ''
            this.showanswer = false
        },
        lastpage() {//上一页
            this.page -= 1
            if (this.page < 0) {
                this.page = this.practice.length - 1
            }
            this.answer = ''
            this.showanswer = false
        },
        finishword(id) {
            this.$emit("finishword", id);
        },
        getanswer() {
            console.log(this.answer);
            this.showanswer = true
            if (this.answer == this.practice[this.page].name) {
                this.yesorno = true
            } else {
                this.yesorno = false
            }
            // return this.answer == this.practice[this.page].name
            console.log(this.answer == this.practice[this.page].name);

        },
        nullinput() {
            this.answer = ''
            this.showanswer = false
            this.idershow=false
        },
        ripefinish(id) {
            this.$emit("ripefinish", id);
            // console.log(id);
        }

    },
    computed: {

    },
    created() {
        this.copylist()
    },
    mounted() {
        this.copylist()
    }
}
</script>

<style lang="scss" scoped>
.answer-enter {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
}

.answer-leave-to {
    opacity: 0;
    transform: translate3d(0, 0, 100%);
}


.answer-enter-active,
.answer-leave-active {
    will-change: transform;
    transition: all 300ms;
    // position: absolute;
}

.practice {
    min-height: 667px;
    backdrop-filter: blur(60px);
    box-shadow: 300px 300px 100px;

    .neirong-top {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 35px;
        /* position: absolute; */
        /* top: 35px; */

        span {
            font-size: 20px;
            color: black;
            padding: 0 18px;
        }

    }


    .practicebox {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 150px;

        input {
            width: 80%;
            background-color: transparent;
            border: 0;
            font-size: 36px;
            line-height: 36px;
            text-align: center;
        }

        h1 {
            text-align: center;
            font-size: 36px;
            padding-top: 20px;
            font-weight: 600;
            transition: all 0.3s;
        }
    }



    h5 {
        padding-top: 20px;
        text-align: center;
        color: #464546;
        font-weight: 600;
        color: rgb(251, 109, 12);
    }

    .ider {
        display: flex;
        justify-content: center;
        padding-top: 16px;
        font-weight: 600;
    }

    .pbox {
        text-align: center;
        padding-top: 50px;

        p {
            padding: 12px 18px;
            font-weight: 600;
        }
    }

    .footmode {
        width: 100%;
        // padding: 15px;
        padding-bottom: 50px;
        position: absolute;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: space-around;

        span {
            font-size: 38px;
        }
    }
}
</style>